<!-- Login.vue -->
<template>
  <div class="login-container">
    <!-- 增强版粒子背景 -->
    <vue-particles
      class="particles"
      color="#FFFFFF"
      :particleOpacity="0.8"
      :particlesNumber="150"
      shapeType="circle"
      :particleSize="5"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.6"
      :linesDistance="120"
      :moveSpeed="5"
      :hoverEffect="true"
      hoverMode="bubble"
      :clickEffect="true"
      clickMode="repulse"
    ></vue-particles>

    <!-- 背景光效 -->
    <div class="light-effect light-1"></div>
    <div class="light-effect light-2"></div>

    <div class="login-box" :class="{'box-float': isHovering}">
      <div class="login-header">
        <img 
          src="../assets/images/logo.png" 
          alt="Logo" 
          class="logo animate__animated animate__rubberBand" 
          :style="{'animation-delay': '0.5s'}"
        >
        <h2 class="animate__animated animate__fadeInDown" :style="{'animation-delay': '0.7s'}">
          矿小言-智能问答系统
          <span class="title-highlight"></span>
        </h2>
        <p class="subtitle animate__animated animate__fadeIn" :style="{'animation-delay': '0.9s'}">
          <span class="subtitle-word" v-for="(word, index) in subtitleWords" :key="index" 
                :style="{'animation-delay': `${1 + index*0.2}s`}">
            {{ word }}
          </span>
        </p>
      </div>

      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form animate__animated animate__fadeInUp"
        :style="{'animation-delay': '1.1s'}"
        @keyup.enter.native="handleLogin"
        @mouseenter="isHovering = true"
        @mouseleave="isHovering = false"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            @focus="inputFocus('username')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            @focus="inputFocus('password')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="login-btn animate__animated"
            :class="{'animate__pulse': !loading, 'animate__heartBeat': buttonBeat}"
            :loading="loading"
            @click="handleLogin"
            @mouseenter="startButtonBeat"
          >
            登录
            <span class="btn-ripple" v-if="showRipple"></span>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-footer animate__animated animate__fadeInUp" :style="{'animation-delay': '1.3s'}">
        <el-checkbox v-model="rememberMe" class="remember-me">记住我</el-checkbox>
        <div class="links">
          <el-link 
            type="primary" 
            @click="goToRegister" 
            class="link-item animate__animated"
            :class="{'animate__swing': linkSwing === 'register'}"
            @mouseenter="triggerLinkSwing('register')"
          >
            注册账号
          </el-link>
          <el-link 
            type="primary" 
            @click="forgotPassword" 
            class="link-item animate__animated"
            :class="{'animate__swing': linkSwing === 'forgot'}"
            @mouseenter="triggerLinkSwing('forgot')"
          >
            忘记密码
          </el-link>
        </div>
      </div>
    </div>

    <!-- 增强版浮动装饰元素 -->
    <div class="floating-elements">
      <div 
        v-for="(shape, index) in floatingShapes" 
        :key="index"
        :class="['shape', `shape-${index}`, shape.type]"
        :style="shape.style"
      ></div>
    </div>

    <!-- 登录成功特效 -->
    <div v-if="showSuccessEffect" class="success-effect">
      <div class="confetti" v-for="(confetti, index) in confettis" :key="index" :style="confetti.style"></div>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import { ref, reactive, onMounted } from 'vue';

export default {
  name: 'Login',
  setup() {
    const isHovering = ref(false);
    const buttonBeat = ref(false);
    const linkSwing = ref(null);
    const showRipple = ref(false);
    const showSuccessEffect = ref(false);
    const confettis = reactive([]);
    const subtitleWords = ['智', '慧', '对', '话', ' · ', '知', '识', '探', '索'];

    const floatingShapes = [
      { type: 'circle', style: { top: '15%', left: '5%', width: '120px', height: '120px', animationDelay: '0s' } },
      { type: 'circle', style: { top: '70%', left: '80%', width: '180px', height: '180px', animationDelay: '2s' } },
      { type: 'triangle', style: { top: '30%', left: '85%', borderWidth: '60px', animationDelay: '1s' } },
      { type: 'square', style: { top: '75%', left: '10%', width: '100px', height: '100px', animationDelay: '1.5s' } },
      { type: 'hexagon', style: { top: '20%', left: '75%', width: '80px', height: '80px', animationDelay: '0.5s' } }
    ];

    const startButtonBeat = () => {
      buttonBeat.value = true;
      setTimeout(() => {
        buttonBeat.value = false;
      }, 1000);
    };

    const triggerLinkSwing = (link) => {
      linkSwing.value = link;
      setTimeout(() => {
        linkSwing.value = null;
      }, 1000);
    };

    const showButtonRipple = () => {
      showRipple.value = true;
      setTimeout(() => {
        showRipple.value = false;
      }, 600);
    };

    const createConfetti = () => {
      showSuccessEffect.value = true;
      confettis.length = 0;
      
      for (let i = 0; i < 100; i++) {
        confettis.push({
          style: {
            backgroundColor: `hsl(${Math.random() * 360}, 100%, 50%)`,
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            width: `${Math.random() * 10 + 5}px`,
            height: `${Math.random() * 10 + 5}px`,
            animationDelay: `${Math.random() * 0.5}s`,
            animationDuration: `${Math.random() * 3 + 2}s`
          }
        });
      }
      
      setTimeout(() => {
        showSuccessEffect.value = false;
      }, 3000);
    };

    // 自动按钮动画
    onMounted(() => {
      setInterval(() => {
        showButtonRipple();
      }, 3000);
    });

    return {
      isHovering,
      buttonBeat,
      linkSwing,
      showRipple,
      showSuccessEffect,
      confettis,
      subtitleWords,
      floatingShapes,
      startButtonBeat,
      triggerLinkSwing,
      showButtonRipple,
      createConfetti
    };
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      },
      loading: false,
      rememberMe: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.createConfetti();
              this.$message.success({
                message: '登录成功',
                duration: 2000,
                showClose: true,
                customClass: 'success-message',
                offset: 80
              });
              setTimeout(() => {
                this.$router.push(this.$route.query.redirect || '/');
              }, 2000);
            })
            .catch(error => {
              this.$message.error({
                message: error.response?.data?.message || '登录失败',
                duration: 3000,
                showClose: true,
                customClass: 'error-message',
                offset: 80
              });
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    goToRegister() {
      this.$router.push('/register');
    },
    forgotPassword() {
      this.$router.push('/forgot-password');
    },
    inputFocus(field) {
      // 输入框聚焦效果
    },
    inputBlur() {
      // 输入框失去焦点效果
    }
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(-45deg, #3f51b1, #5a55ae, #7b5fac, #8f6aae, #a86aa4, #cc6b8e, #f18271, #f3a469, #f7c978);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow: hidden;
  font-family: 'Noto Sans SC', sans-serif;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.light-effect {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  opacity: 0.7;
}

.light-1 {
  width: 300px;
  height: 300px;
  background: #ff5e62;
  top: -100px;
  left: -100px;
  animation: lightMove1 20s infinite alternate;
}

.light-2 {
  width: 400px;
  height: 400px;
  background: #4facfe;
  bottom: -150px;
  right: -100px;
  animation: lightMove2 25s infinite alternate;
}

@keyframes lightMove1 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(100px, 50px); }
  50% { transform: translate(200px, -50px); }
  75% { transform: translate(100px, -100px); }
  100% { transform: translate(0, 0); }
}

@keyframes lightMove2 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-100px, -50px); }
  50% { transform: translate(-200px, 50px); }
  75% { transform: translate(-100px, 100px); }
  100% { transform: translate(0, 0); }
}

.login-box {
  position: relative;
  width: 450px;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
  backdrop-filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.box-float {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 
              0 0 0 2px rgba(255, 255, 255, 0.1) inset;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.login-header .logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  transition: all 0.5s ease;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.login-header h2 {
  color: #333;
  font-size: 28px;
  font-weight: 700;
  margin: 20px 0 10px;
  letter-spacing: 1.5px;
  position: relative;
  display: inline-block;
}

.title-highlight {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  z-index: -1;
  border-radius: 4px;
  opacity: 0.5;
  animation: highlightPulse 3s infinite;
}

@keyframes highlightPulse {
  0%, 100% { opacity: 0.5; width: 100%; }
  50% { opacity: 0.8; width: 110%; }
}

.subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
  font-weight: 300;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.subtitle-word {
  display: inline-block;
  animation: wordBounce 1.5s infinite;
  animation-delay: inherit;
}

@keyframes wordBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.login-form {
  margin-top: 40px;
}

.input-field {
  margin-bottom: 25px;
}

.login-btn {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  font-size: 18px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 242, 254, 0.3);
  z-index: 1;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 242, 254, 0.4);
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.login-btn:hover::before {
  opacity: 1;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  font-size: 15px;
}

.remember-me {
  transition: all 0.3s ease;
}

.remember-me:hover {
  transform: scale(1.05);
}

.links {
  display: flex;
  gap: 20px;
}

.link-item {
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.link-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.link-item:hover::after {
  width: 100%;
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  opacity: 0.15;
  animation: float 15s infinite ease-in-out;
}

.circle {
  border-radius: 50%;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #ff5e62;
}

.square {
  background: #a18cd1;
  transform: rotate(45deg);
}

.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #fbc2eb;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -30px) rotate(10deg);
  }
  50% {
    transform: translate(-20px, 20px) rotate(-10deg);
  }
  75% {
    transform: translate(30px, 10px) rotate(5deg);
  }
}

/* 输入框样式 */
:deep(.el-input__wrapper) {
  transition: all 0.5s ease;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 12px;
  padding: 0 15px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #4facfe inset !important;
  transform: translateY(-3px);
  background-color: white;
}

:deep(.el-input__inner) {
  font-size: 15px;
}

/* 消息提示样式 */
:deep(.success-message) {
  background: linear-gradient(90deg, #56ab2f, #a8e063);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(86, 171, 47, 0.4);
  border: none;
}

:deep(.error-message) {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255, 65, 108, 0.4);
  border: none;
}

/* 登录成功特效 */
.success-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  animation: confettiFall 3s ease-in forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    width: 90%;
    padding: 30px;
  }
  
  .login-header .logo {
    width: 80px;
    height: 80px;
  }
  
  .login-header h2 {
    font-size: 24px;
  }
}
</style>